<nz-card [nzBordered]="false" [nzBodyStyle]="{padding:'10px 24px'}">
  <div class="left-start-center">
    <nz-breadcrumb>
      <nz-breadcrumb-item>
        首页
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        Dashboard
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        分析页
      </nz-breadcrumb-item>
    </nz-breadcrumb>
  </div>
</nz-card>

<section class="content-wrap">
  <section class="ant-row" nz-row [nzGutter]="[32,16]">
    <div nz-col [nzXl]="6" [nzXXl]="6" [nzLg]="12" [nzMd]="12" [nzSm]="12" [nzXs]="24">
      <div class="card-wrap">
        <nz-card [nzBodyStyle]="cardPadding" [nzBordered]="false">
          <div class="card-top">
            <div class="title">总销售额</div>
            <div class="number">￥126,560</div>
            <i nz-icon nzType="info-circle" nzTheme="outline" nz-tooltip nzTooltipTitle="指标说明"></i>
          </div>
          <div class="card-mid">
            <div class="mid-text">
            <span>日同比 11% <i nz-icon nzType="caret-down" style="color: green;font-size: 12px"
                             nzTheme="outline"></i></span>
            </div>
            <div class="mid-text">
              <span>周同比 12% <i nz-icon nzType="caret-up" style="color: red;font-size: 12px"
                               nzTheme="outline"></i></span>
            </div>

          </div>
          <nz-divider class="m-0"></nz-divider>
          <div class="card-footer">
            日销售额 ￥12,423
          </div>
        </nz-card>

      </div>
    </div>
    <div nz-col [nzXl]="6" [nzXXl]="6" [nzLg]="12" [nzMd]="12" [nzSm]="12" [nzXs]="24">
      <div class="card-wrap">
        <nz-card [nzBodyStyle]="cardPadding" [nzBordered]="false">
          <div class="card-top">
            <div class="title">访问量</div>
            <div class="number">8,846</div>
            <i nz-icon nzType="info-circle" nzTheme="outline" nz-tooltip nzTooltipTitle="指标说明"></i>
          </div>
          <div class="card-mid">
            <div id="miniArea"></div>
          </div>
          <nz-divider class="m-0"></nz-divider>
          <div class="card-footer">
            日访问量 1,234
          </div>
        </nz-card>

      </div>
    </div>
    <div nz-col [nzXl]="6" [nzXXl]="6" [nzLg]="12" [nzMd]="12" [nzSm]="12" [nzXs]="24">
      <div class="card-wrap">
        <nz-card [nzBodyStyle]="cardPadding" [nzBordered]="false">
          <div class="card-top">
            <div class="title">支付笔数</div>
            <div class="number">6,560</div>
            <i nz-icon nzType="info-circle" nzTheme="outline" nz-tooltip nzTooltipTitle="指标说明"></i>
          </div>
          <div class="card-mid">
            <div id="miniBar"></div>
          </div>
          <nz-divider class="m-0"></nz-divider>
          <div class="card-footer">
            转化率 60%
          </div>
        </nz-card>
      </div>
    </div>
    <div nz-col [nzXl]="6" [nzXXl]="6" [nzLg]="12" [nzMd]="12" [nzSm]="12" [nzXs]="24">
      <div class="card-wrap">
        <nz-card [nzBodyStyle]="cardPadding" [nzBordered]="false">
          <div class="card-top">
            <div class="title">运营活动效果</div>
            <div class="number">78%</div>
            <i nz-icon nzType="info-circle" nzTheme="outline" nz-tooltip nzTooltipTitle="指标说明"></i>
          </div>
          <div class="card-mid">
            <div id="progress"></div>
          </div>
          <nz-divider class="m-0"></nz-divider>
          <div class="card-footer">
            日销售额 ￥12,423
          </div>
        </nz-card>
      </div>
    </div>
  </section>

  <section class="flow-wrap m-t-20">
    <nz-card [nzBordered]="true" [nzBodyStyle]="{padding:0}">
      <nz-tabset [nzTabBarStyle]="{'padding':'0 10px','fontSize':'16px'}" [nzAnimated]="false"
                 [nzTabBarExtraContent]="extraTemplate">
        <nz-tab nzTitle="销售额">
          <div nz-row>
            <div nz-col [nzXl]="17" [nzLg]="12" [nzMd]="13" [nzSm]="24" [nzXs]="24">
              <h3 class="p-l-35">销售趋势</h3>
              <div id="histogram"></div>
            </div>
            <div nz-col [nzXl]="7" [nzLg]="12" [nzMd]="11" [nzSm]="24" [nzXs]="24">
              <h3 class="p-l-35 m-b-20">门店销售额排名</h3>
              <div title="工专路 {{i}} 号店" class="rank-list" *ngFor="let item of 7|numberLoop;let i=index">
                <div class="center">
                  <nz-badge [nzStyle]="{background:i<4?'#314659':'#fafafa',color:i<4?'#fff':'black'}"
                            [nzCount]="i+1"></nz-badge>
                  <span class="m-l-5">工专路 {{i}} 号店</span>
                </div>
                <div>323,234</div>
              </div>
            </div>
          </div>
        </nz-tab>
        <nz-tab nzTitle="访问量">
          <h3>❤❤❤❤等待你的pr❤❤❤❤</h3>
        </nz-tab>
      </nz-tabset>
    </nz-card>

    <ng-template #extraTemplate>
      <nz-radio-group nzSize="small">
        <label nz-radio-button nzValue="A">今日</label>
        <label nz-radio-button nzValue="B">本周</label>
        <label nz-radio-button nzValue="C">本月</label>
        <label nz-radio-button nzValue="D">全年</label>
      </nz-radio-group>
      <nz-range-picker class="m-l-20"></nz-range-picker>
    </ng-template>
  </section>

  <section class="hot-search-pipe-wrap m-t-20" nz-row [nzGutter]="[16,0]">
    <div class="hot-search-wrap" nz-col nzSpan="12"
         [nzXl]="12" [nzXXl]="12" [nzLg]="12" [nzMd]="24" [nzSm]="24" [nzXs]="24">
      <nz-card [nzBodyStyle]="{'height':'500px'}" [nzExtra]="hotExtra" [nzTitle]="'线上热门搜索'">
        <div class="search-wrap" nz-row>
          <div class="search-block" nz-col [nzXl]="12" [nzXXl]="12" [nzLg]="12" [nzMd]="12" [nzSm]="24" [nzXs]="24">
            <div>
              <div>
                <span nz-typography nzType="secondary">搜索用户数 <i nz-icon nzType="info-circle" nzTheme="outline"
                                                                nz-tooltip nzTooltipTitle="指标说明"></i></span>
              </div>
              <div><h3 class="d-i-b m-r-30" nz-typography>12,321</h3><span>17.1 <i nz-icon nzType="caret-up"
                                                                                   style="color: red;font-size: 12px"
                                                                                   nzTheme="outline"></i></span></div>
            </div>
            <div id="searchUserChart"></div>
          </div>
          <div class="search-block" nz-col [nzXl]="12" [nzXXl]="12" [nzLg]="12" [nzMd]="12" [nzSm]="24" [nzXs]="24">
            <div>
              <div>
                <span nz-typography nzType="secondary">
                  人均搜索次数 <i nz-icon nzType="info-circle" nzTheme="outline" nz-tooltip nzTooltipTitle="指标说明"></i>
                </span>
              </div>
              <div><h3 class="d-i-b m-r-30" nz-typography>12,321</h3><span>17.1 <i nz-icon nzType="caret-up"
                                                                                   style="color: red;font-size: 12px"
                                                                                   nzTheme="outline"></i></span></div>
            </div>
            <div id="searchUserAvgChart"></div>
          </div>
          <nz-table class="m-t-25" nzSize="small" #sortTable [nzData]="listOfData" nzTableLayout="fixed">
            <thead>
            <tr>
              <th *ngFor="let column of listOfColumn" [nzSortFn]="column.compare"
                  [nzSortPriority]="column.priority">{{ column.title }}</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of sortTable.data">
              <td>{{ data.name }}</td>
              <td>{{ data.chinese }}</td>
              <td>{{ data.math }}</td>
              <td>{{ data.english }}</td>
            </tr>
            </tbody>
          </nz-table>
        </div>
      </nz-card>
      <ng-template #hotExtra>
        <a>More</a>
      </ng-template>
    </div>
    <div class="pipe-wrap" nz-col nzSpan="12"
         [nzXl]="12" [nzXXl]="12" [nzLg]="12" [nzMd]="24" [nzSm]="24" [nzXs]="24">
      <nz-card [nzBodyStyle]="{'height':'500px'}" [nzTitle]="'销售额类别占比'">
        <h4>销售额</h4>
        <div id="ringPie"></div>

      </nz-card>
    </div>
  </section>

  <!--等待你的pr-->
  <!--  <section class="m-t-20">
      <nz-card>
        <nz-tabset>
          <ng-container *ngFor="let i of 51|numberLoop">
            <nz-tab [nzTitle]="tabTitle">
              ❤❤❤❤等待你的pr❤❤❤❤
            </nz-tab>
          </ng-container>
        </nz-tabset>
        <ng-template #tabTitle>
          <div class="bottom-block-tab-wrap">
            <div class="tab-title">stores 0</div>
            <div class="tab-pipe-wrap">
              <div>
                <div>转化率</div>
                <div>90%</div>
              </div>
              <div>
                <div id="miniRing"></div>
              </div>
            </div>
          </div>
        </ng-template>
      </nz-card>

    </section>-->
</section>
